;(function ($) {
    $.widget("tempo.columnselectmutual",{
        options:{
            //input默认宽度
            inputWidth: 150,
            //input的默认值
            inputValue: "",
        },

        _create:function () {
            //校验
            if(!this._initValidate()) return;
            //由input框和按钮组成
            this._initBasePage();

            this._initBaseEvent();

        },

        /**
         * 初始化调用校验
         * 校验传递的参数是否正确
         * @private
         */
        _initValidate: function() {
            //校验调用的元素是否为div
            if(this.element.prop("nodeName") != "DIV") {
                alert("调用columnselectmutual组件的元素必须是div");
                return false;
            }
            return true;
        },

        /**
         * 初始化input狂和设置按钮
         * @private
         */
        _initBasePage:function () {
            var _this = this;

            var parentDiv = $("<div name='parentDiv' id='parentDiv' class='parent_div' style='display: inline-flex'>").appendTo($(this.element));
            //初始化input框
            var elInput = $("<input>").appendTo(parentDiv);
            elInput.validatebox({
                width: _this.options.inputWidth,
                required: true,
                validator: true,
                value: _this.options.inputValue,
                readonly: "true",
                disabled: "true"
            });

            //初始化设置按钮
            var settingHtml = "<a href='javascript:;void(0)' title='列选择' style='padding-left: 10px'>" +
                                    "<span class='ui-icon tempo-ui-icon tempo-mine-button tempo-ui-icon-no-mutual tempo-ui-icon-setting'></span>" +
                                "</a>";
            var elBtn = $(settingHtml).appendTo(parentDiv);
        },

        /**
         * 初始化基础事件
         * 点击设置按钮进入列选择弹框
         * @private
         */
        _initBaseEvent: function () {
            this._initSettingElBtn();
        },

        /**
         * 初始化设置按钮事件
         * 点击打开列选择弹框
         * @private
         */
        _initSettingElBtn:function () {
            var _this = this;
            var parentDiv = $(this.element).find(".parent_div");

            parentDiv.find(".tempo-ui-icon-setting").parent().unbind("click").bind("click", function (e) {
                //弹出dialog框
                var columnSelectDialog = $("<div>").appendTo($("html"));
                columnSelectDialog.dialog({
                    title: "列选择",
                    autoOpen: true,
                    width: 800,
                    height: 600,
                    resizable: false,
                    modal: true,
                    close: function () {
                        columnSelectDialog.dialog('destroy');
                    },
                    open: function () {
                        //弹框打开初始化页面
                        _this._initColumnSelectDialogPage();
                    },
                    buttons: [
                        {
                            text: TempoUtils.locale("mine.publish-dialog-sure"),
                            click: function () {
                                //确定触发的事件
                                _this._saveColumnSelectDialog();
                                columnSelectDialog.dialog('close');
                            }
                        }, {
                            text: TempoUtils.locale("mine.publish-dialog-cancel"),
                            click: function () {
                                columnSelectDialog.dialog('close');
                            }
                        }]
                });
            })
        },


        /**
         * 初始化列选择弹框打开的页面
         * @private
         */
        _initColumnSelectDialogPage:function () {
            debugger;
        },

        /**
         * 列选择点击确定触发的事件
         * @private
         */
        _saveColumnSelectDialog:function () {
            debugger;
        }

    });
})(jQuery);